<template>
  <a-modal
    title="移动滑块获取验证码"
    :visible="visible"
    :footer="null"
    :maskClosable="false"
    :width="450"
    :bodyStyle="bodyStyle"
    :dialogStyle="dialogStyle"
    @cancel="handleCancel"
  >
    <drag-verify
      :key="key"
      style="user-select: none"
      ref="dragVerify"
      isPassing.sync="isPassing"
      text="请按住滑块拖动"
      successText="验证通过"
      background="#ccc"
      completedBg="rgb(105, 231, 251)"
      handlerIcon="el-icon-d-arrow-right"
      successIcon="el-icon-circle-check"
      @passcallback="passcallback"
    >
    </drag-verify>
  </a-modal>
</template>

<script>
import DragVerify from '@/components/dragVerify.vue'
import { ApiGetLoginCode } from '@/api/login'
export default {
  name: '',
  components: {
    DragVerify,
  },
  data() {
    return {
      bodyStyle: {
        padding: '40px',
        backgroundColor: '#f4f4f4',
      },
      dialogStyle: {
        top: '280px',
      },
      visible: false,
      loginParams: {},
      key: 1,
    }
  },
  methods: {
    async passcallback() {
      const { username, password } = this.loginParams
      try {
        const res = await ApiGetLoginCode({
          username: this.$getRsaCode(username),
          password: this.$getRsaCode(password),
          accountType: 0
        })
        this.$emit('successInfo', res, this.loginParams)
        this.loginParams = {}
        this.visible = false
      } catch (error) {}
    },
    open(loginParams) {
      this.key++
      this.loginParams = loginParams
      this.visible = true
    },
    handleCancel() {
      this.loginParams = {}
      this.visible = false
      this.$emit('closeSmsSendBtn')
    },
  },
}
</script>
<style lang="less" scope>
.close {
  margin-top: 10px;
  user-select: none;
  text-align: right;
}
</style>
